<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<script>
var app = angular.module('myApp', ['ngMap']);
app.controller('BasicCtrl1', function(NgMap) {
  var TILE_SIZE = 256;

  function bound(value, opt_min, opt_max) {
    if (opt_min != null) value = Math.max(value, opt_min);
    if (opt_max != null) value = Math.min(value, opt_max);
    return value;
  }

  function degreesToRadians(deg) {
    return deg * (Math.PI / 180);
  }

  function radiansToDegrees(rad) {
    return rad / (Math.PI / 180);
  }

  function MercatorProjection() {
    this.pixelOrigin_ = new google.maps.Point(TILE_SIZE / 2, TILE_SIZE / 2);
    this.pixelsPerLonDegree_ = TILE_SIZE / 360;
    this.pixelsPerLonRadian_ = TILE_SIZE / (2 * Math.PI);
  }

  MercatorProjection.prototype.fromLatLngToPoint = function(latLng,
      opt_point) {
    var me = this;
    var point = opt_point || new google.maps.Point(0, 0);
    var origin = me.pixelOrigin_;

    point.x = origin.x + latLng.lng() * me.pixelsPerLonDegree_;

    // Truncating to 0.9999 effectively limits latitude to 89.189. This is
    // about a third of a tile past the edge of the world tile.
    var siny = bound(Math.sin(degreesToRadians(latLng.lat())), -0.9999,
        0.9999);
    point.y = origin.y + 0.5 * Math.log((1 + siny) / (1 - siny)) *
        -me.pixelsPerLonRadian_;
    return point;
  };

  MercatorProjection.prototype.fromPointToLatLng = function(point) {
    var me = this;
    var origin = me.pixelOrigin_;
    var lng = (point.x - origin.x) / me.pixelsPerLonDegree_;
    var latRadians = (point.y - origin.y) / -me.pixelsPerLonRadian_;
    var lat = radiansToDegrees(2 * Math.atan(Math.exp(latRadians)) -
        Math.PI / 2);
    return new google.maps.LatLng(lat, lng);
  };

  var vm = this;
  NgMap.getMap().then(function(map) {
    var numTiles = 1 << map.getZoom();
    var projection = new MercatorProjection();
    vm.chicago = map.getCenter();
    vm.map = map;
    vm.worldCoordinate = projection.fromLatLngToPoint(vm.chicago);
    vm.pixelCoordinate = new google.maps.Point(
        vm.worldCoordinate.x * numTiles,
        vm.worldCoordinate.y * numTiles);
    vm.tileCoordinate = new google.maps.Point(
        Math.floor(vm.pixelCoordinate.x / TILE_SIZE),
        Math.floor(vm.pixelCoordinate.y / TILE_SIZE));
  });
});
</script>
</head>

<body ng-controller="BasicCtrl1 as vm">
  Showing static coordinates of Chicago
  <br/>
  <ng-map default-style="true" center="41.850033,-87.6500523" zoom="3">
    <info-window id="1" position="41.850033,-87.6500523" visible="true">
      <div ng-non-bindable>
        Chicago, IL<br/>
        LatLng: {{vm.chicago.lat()}}, {{vm.chicago.lng()}}, <br/>
        World Coordinate: {{vm.worldCoordinate.x}}, {{vm.worldCoordinate.y}}, <br/>
        Pixel Coordinate: {{vm.pixelCoordinate.x}}, {{vm.pixelCoordinate.y}}, <br/>
        Tile Coordinate: {{vm.tileCoordinate.x}}, {{vm.tileCoordinate.y}} at Zoom Level {{vm.map.getZoom()}}
      </div>
    </info-window>
  </ng-map>
</body>
</html>
